<template>
	<view>
		<image class="homebg" src="https://youlinapi.zhihui361.com/image/wx/homebg-rider.png" mode=""></image>
		<navtop :background="opacity">
			<view class="nav-box">
				<view class="work-box fa">
					<view class="work-list" :class="{active: index == workIndex}" v-for="(item, index) in workList" :key="index" @click="workChange(index)">{{item}}</view>
				</view>
				<view class="title ell1">{{community}}</view>
			</view>
		</navtop>
		<view class="main pr">
			<view class="notice-box fa jcsb">
				<view class="notice-inner fa">
					<view class="title fa jcc">
						<image class="notice1" src="../../static/notice1.png" mode=""></image>
						<image class="notice2" src="../../static/notice2.png" mode=""></image>
					</view>
					<view class="list fa">
						<swiper class="noticeswiper" :vertical="true" :autoplay="true" :interval="3000" :duration="500">
							<swiper-item v-for="(item, index) in noticeList" :key="index">
								<view class="noticeitem ell1">{{item}}</view>
							</swiper-item>
						</swiper>
						<image class="right-icon" src="../../static/right.png" mode=""></image>
					</view>
				</view>
				<view class="service-box">
					<image class="service-icon" src="../../static/service.png" mode=""></image>
					<button class="share-btn" open-type="contact"></button>
				</view>
			</view>
			<view class="tabs fa">
				<view class="tab fa jcc pr" :class="{active: tabIndex == 0}" @click="tabChange(0)">
					<image class="ordertab" src="../../static/ordertab.png" mode="" v-show="tabIndex == 0"></image>
					<view class="fa jcc pr">
						<image class="ordertag" src="../../static/ordertag.png" mode="" v-show="tabIndex == 0"></image>
						<view class="pr">商城订单</view>
					</view>
				</view>
				<view class="tab fa jcc pr" :class="{active: tabIndex == 1}" @click="tabChange(1)">
					<image class="ordertab2" src="../../static/ordertab2.png" mode="" v-show="tabIndex == 1"></image>
					<view class="fa jcc pr">
						<image class="ordertag" src="../../static/ordertag.png" mode="" v-show="tabIndex == 1"></image>
						<view class="pr">取送订单</view>
					</view>
				</view>
			</view>
			<view class="date-box fa jcsb">
				<view class="fa">
					<image class="calendar-icon" src="../../static/calendar.png" mode=""></image>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view>{{date}}</view>
					</picker>
					<view style="margin: 0 6rpx;">-</view>
					<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
						<view>{{date2}}</view>
					</picker>
					<image class="down-icon" src="../../static/down.png" mode=""></image>
				</view>
				<view @click="batchShow">批量接单</view>
			</view>
			<view class="order-box" v-if="list.length > 0">
				<view class="order-list" v-for="(item, index) in list" :key="index" @click="utils.navTo('/pages/index/hall_detail', {id: item.ordersId})">
					<view class="title fa jcsb">
						<view class="flex">
							<view class="name" v-if="item.type == 1">{{item.secondType == 0 ? '帮取' : '帮送'}}</view>
							<view class="time flex1 fa">
								<view>{{item.type == 0 ? '配送时间' : item.secondType == 0 ? '收货时间' : '发货时间'}}：</view>
								<view class="flex1 fa">
									<view style="margin-right: 10rpx;">{{item.day}}</view>
									<view>{{item.receivingTime}}</view>
									<view>~</view>
									<view>{{item.receivingEndTime}}</view>
								</view>
							</view>
						</view>
						<view class="pick-box fa" @click.stop="selectGoods(index)">
							<image class="pick" src="../../static/pick-fill.png" mode="" v-show="item.selected && isBatch"></image>
							<image class="pick" src="../../static/pick.png" mode="" v-show="!item.selected && isBatch"></image>
						</view>
					</view>
					<view class="address-wrapper">
						<view class="address-list flex" v-if="tabIndex == 1">
							<image class="receive-icon2" src="../../static/fetch2.png" mode=""></image>
							<view class="flex1">
								<view class="address">{{item.fetchEstate}}{{item.fetchDetails}}</view>
								<view class="contact">{{item.fetchName}}</view>
							</view>
						</view>
						<view class="address-list flex">
							<image class="receive-icon2" src="../../static/receive2.png" mode="" v-if="tabIndex == 1"></image>
							<image class="receive-icon" src="../../static/receive.png" mode="" v-if="tabIndex == 0"></image>
							<view class="flex1">
								<view class="address">{{item.sendEstate}}{{item.sendDetails}}</view>
								<view class="contact">{{item.sendName}}</view>
							</view>
						</view>
					</view>
					<view class="remark" v-if="item.type == 1">
						<view>特殊要求：{{item.specialMemo || '无'}}</view>
						<view>备注：{{item.memo || '无'}}</view>
					</view>
					<view class="operate-box fa jcsb">
						<view class="price" v-if="item.type == 0">￥{{item.money}}</view>
						<view v-else></view>
						<view class="operate-btn" @click.stop="receiveOrder(item.ordersId)">接单</view>
					</view>
				</view>
			</view>
			<view class="noorder-box fa fdc" v-if="nodata">
				<image class="noorder-image" src="../../static/noorder.png" mode=""></image>
				<view class="prompt">暂无新的订单，刷新一下吧~</view>
				<view class="noorder-btn" @click="refreshOrder">刷新</view>
			</view>
			<view class="noorder-box fa fdc" v-if="nologin">
				<image class="noorder-image" src="../../static/noorder.png" mode=""></image>
				<view class="prompt">暂无新的订单，刷新一下吧~</view>
				<view class="noorder-btn" @click="refreshOrder">刷新</view>
			</view>
		</view>
		<view class="fixed-bottombar" v-show="isBatch">
			<view class="bottombar-box fa jcsb">
				<view class="fa" @click="selectAll">
					<image class="pick" src="../../static/pick-fill.png" mode="" v-if="isAll"></image>
					<image class="pick" src="../../static/pick.png" mode="" v-else></image>
					<view>全选</view>
				</view>
				<view class="receive-btn" @click="batchOrder">批量接单</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				opacity: 'rgba(255,255,255,0)',
				community: '',
				workList: ['上班', '下班'],
				workIndex: 0,
				noticeList: [],
				tabList: ['商城订单', '取送订单'],
				tabIndex: 0,
				page: 1,
				count: 0,
				list: [],
				ordersIds: [],
				nodata: 0,
				nologin: 0,
				isAll: false,
				isBatch: false,
				date: currentDate,
				date2: currentDate,
				courierId: ''
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onPageScroll(e) {
			this.opacity = 'rgba(255,255,255,' + this.utils.opacityCompute(e.scrollTop) + ')'
		},
		onLoad() {
			
		},
		onShow() {
			this.isAll = false
			this.page = 1
			this.count = 0
			this.list = []
			this.getUserinfo()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.page = 1
				this.count = 0
				this.list = []
				this.getList()
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if(this.list.length < this.count) {
				this.page++
				this.getList()
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 上下班
			workChange(index) {
				uni.showLoading({
					title: '加载中'
				})
				this.api.userUpdateFunc({
					courierId: this.courierId,
					state: index == 0 ? 1 : 0
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						this.workIndex = index
					}else {
						uni.showToast({
							title: '设置失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '设置失败',
						icon: 'none'
					})
				})
			},
			// 查看商城订单和取送订单
			tabChange(index) {
				this.tabIndex = index
				this.page = 1
				this.getList()
			},
			bindDateChange(e) {
				this.date = e.detail.value
				this.page = 1
				this.getList()
			},
			bindDateChange2(e) {
				this.date2 = e.detail.value
				this.page = 1
				this.getList()
			},
			getUserinfo() {
				this.api.userinfoFunc().then(res => {
					if(res.code == 200) {
						this.courierId = res.data.courierId
						this.community = res.data.takeEstate
						this.workIndex = res.data.state == 1 ? 0 : 1
						this.getList()
					}
				})
			},
			// 获取订单列表
			getList() {
				this.nodata = 0
				this.api.hallListFunc({
					type: this.tabIndex,
					isReceive: 0,
					state: 1,
					startTime: this.date,
					endTime: this.date2,
					pageNum: this.page
				}).then(res => {
					if(res.code == 200) {
						this.nologin = 0
						this.count = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
						this.nodata = this.list.length > 0 ? 0 : 1
						this.list.forEach(item => {
							item.selected = 0
							item.today = item.day.substr(5, 2) + '.' + item.day.substr(8, 2)
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 刷新订单
			refreshOrder() {
				uni.startPullDownRefresh();
			},
			// 接单
			receiveOrder(id) {
				uni.showModal({
					title: '提示',
					content: '是否确认接单',
					success: result => {
						if(result.confirm) {
							this.api.orderTakeFunc({
								ordersIds: id
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '接单成功'
									})
									this.getList()
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			batchShow() {
				this.isBatch = !this.isBatch
			},
			// 批量接单单选
			selectGoods(index) {
				let item = this.list[index]
				item.selected = item.selected ? 0 : 1
				this.$set(this.list, index, item)
				this.isAll = this.list.every(item => {
					return item.selected == 1
				})
			},
			// 批量接单全选
			selectAll() {
				if(this.isAll) {
					this.isAll = 0
					this.list.forEach(item => {
						item.selected = 0
					})
				}else {
					this.isAll = 1
					this.list.forEach(item => {
						item.selected = 1
					})
				}
			},
			// 批量接单按钮
			batchOrder() {
				let token = uni.getStorageSync('token')
				if(!token) return uni.navigateTo({
					url: '/pages/login/login'
				})
				let atLeast = this.list.some(item => {
					return item.selected
				})
				if(!atLeast) return uni.showToast({
					title: '请选择订单',
					icon: 'none'
				})
				let ordersIds = []
				this.list.forEach(item => {
					if(item.selected) {
						ordersIds.push(item.ordersId)
					}
				})
				uni.showModal({
					title: '提示',
					content: '是否确认接单',
					success: result => {
						if(result.confirm) {
							this.api.orderTakeFunc({
								ordersIds: ordersIds.join()
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '接单成功'
									})
									this.getList()
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homebg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 450rpx;
	}
	.nav-box{
		position: relative;
		padding: 0 24rpx;
		.work-box{
			width: 200rpx;
			height: 60rpx;
			border: 2rpx solid #eee;
			border-radius: 30rpx;
			background-color: #fff;
			.work-list{
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				&.active{
					color: #fff;
					background: linear-gradient(90deg, #FF8232, #FE3A19 100%);
				}
			}
		}
		.title{
			position: absolute;
			top: 50%;
			left: 240rpx;
			right: 240rpx;
			transform: translateY(-50%);
			min-width: 0;
			width: 284rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.notice-box{
		margin: 20rpx 24rpx 0;
		padding-left: 4rpx;
		box-sizing: border-box;
		height: 48rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		.notice-inner{
			flex: 1;
			padding: 0 20rpx;
			height: 48rpx;
			border: 2rpx solid #fff;
			border-radius: 34rpx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .1) 100%);
		}
		.title{
			.notice1{
				width: 32rpx;
				height: 32rpx;
			}
			.notice2{
				margin-left: 10rpx;
				width: 132rpx;
				height: 26rpx;
			}
		}
		.list{
			position: relative;
			margin-left: 12rpx;
			padding-left: 14rpx;
			height: 100%;
			flex: 1;
			.noticeswiper{
				width: 100%;
				height:64rpx;
				.noticeitem{
					width: 100%;
					line-height:64rpx;
					font-size: 24rpx;
					color:#333333;
				}
			}
			.right-icon{
				width: 28rpx;
				height: 28rpx;
			}
		}
		.service-box{
			position: relative;
			margin-left: 10rpx;
			width: 52rpx;
			height: 50rpx;
			.service-icon{
				width: 52rpx;
				height: 50rpx;
			}
			.share-btn{
				position: absolute;
				top: 0;
				left: 0;
				width: 52rpx;
				height: 50rpx;
				opacity: 0;
			}
		}
	}
	.tabs{
		margin-top: 18rpx;
		height: 72rpx;
		border-radius: 36rpx 36rpx 0 0;
		color: #fff;
		background-color: #3C4A43;
		.tab{
			flex: 1;
			height: 72rpx;
			font-weight: bold;
			&.active{
				color: #333;
			}
			.ordertab{
				position: absolute;
				top: 0;
				left: 0;
				width: 402rpx;
				height: 72rpx;
			}
			.ordertab2{
				position: absolute;
				top: 0;
				right: 0;
				width: 402rpx;
				height: 72rpx;
			}
			.ordertag{
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
	.date-box{
		padding: 30rpx 26rpx 0;
		box-sizing: border-box;
		height: 60rpx;
		font-size: 24rpx;
		background-color: var(--bodybg);
		.calendar-icon{
			margin-right: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}
		.down-icon{
			margin-left: 4rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}
	.order-box{
		padding: 30rpx 28rpx 10rpx;
		background-color: var(--bodybg);
		.order-list{
			margin-bottom: 20rpx;
			padding: 0 20rpx 32rpx;
			border-radius: 24rpx;
			background: #fff;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(204,204,204,0.25);
			.title{
				padding: 24rpx 0;
				border-bottom: 2rpx solid #eee;
				.name{
					margin-right: 14rpx;
					padding: 0 14rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #18C954;
					background-color: #E7F4EA;
				}
				.time{
					font-size: 24rpx;
				}
				.pick-box{
					padding: 10rpx;
				}
				.pick{
					width: 36rpx;
					height: 36rpx;
				}
			}
			.address-wrapper{
				padding-top: 20rpx;
				border-radius: 16rpx;
				background-color: #fff;
				.address-list{
					position: relative;
					margin-bottom: 33rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.receive-icon{
						margin-right: 10rpx;
						width: 46rpx;
						height: 40rpx;
					}
					.receive-icon2{
						margin-right: 10rpx;
						width: 46rpx;
						height: 46rpx;
					}
					.address{
						font-size: 30rpx;
						font-weight: bold;
					}
					.contact{
						margin-top: 2rpx;
						font-size: 24rpx;
						color: #999;
						line-height: 28rpx;
					}
				}
			}
			.remark{
				margin-top: 24rpx;
				padding: 20rpx;
				border-radius: 4rpx;
				background-color: #F1F1F9;
			}
			.operate-box{
				margin-top: 26rpx;
				padding-top: 26rpx;
				border-top: 2rpx solid #eee;
				.price{
					font-size: 30rpx;
					font-weight: bold;
					color: #FE3134;
				}
				.operate-btn{
					padding: 0 56rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 32rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
		}
	}
	.noorder-box{
		margin-top: 206rpx;
		.noorder-image{
			width: 464rpx;
			height: 253rpx;
		}
		.prompt{
			font-size: 22rpx;
			color: #777;
		}
		.noorder-btn{
			margin-top: 80rpx;
			padding: 0 80rpx;
			height: 72rpx;
			line-height: 72rpx;
			border: 2rpx solid #18C954;
			border-radius: 36rpx;
			color: #18C954;
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 28rpx;
			height: 100rpx;
			background-color: #fff;
			.pick{
				margin-right: 10rpx;
				width: 36rpx;
				height: 36rpx;
			}
			.receive-btn{
				padding: 0 32rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 36rpx;
				text-align: center;
				color: #fff;
				background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
			}
		}
		.fixed-place{
			height: 100rpx;
		}
	}
</style>
